<template>
  <div>
    <el-card class="search-card">
      <BasicTableForm
        ref="formData"
        :formColumns="FORM_ITEM_LIST"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
        :colNumOfRow="4"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showSelectCol
        :defaultWidth="100"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :tableHeight="490"
        showActionCol
        :actionColWidth="100"
        :actionRender="renderTableBtnAction"
        :selectionChange="selectionChange"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <!-- 按钮操作栏 -->
          <BtnRender :render="renderBtnsBar" />
        </div>
      </basic-table>
      <!-- 导出 -->
      <ExportDialog
        :visible.sync="visible"
        :exportInfo='exportInfo'
        :total='pagination.total'
      />
      <!-- 设置表头 -->
      <ConfigTableColumnsDialog
        v-if="fieldSettingVisible"
        :menuId="menuId"
        :dialogVisible="fieldSettingVisible"
        @handleClose="handleConfigTableColumnsDialogClose"
        @handleSubmit="hanldSubmitTableColumnsConfig"
      />
      <!-- 计划签订类型 -->
      <SelectSignType
        :visible.sync="signTypeVisible"
        :selectId="selectId"
        @getTableData="getTableData"
      />
      <!-- 是否达标 -->
      <SelectStandardOrNot
        :visible.sync="standardVisible"
        :selectId="selectId"
        @getTableData="getTableData"
      />
    </el-card>
  </div>
</template>
<script>
import { FORM_ITEM_LIST } from '../constants';
import BasicPage from '@/mixins/supplier/basicPage';
import Dict from '@/mixins/supplier/dict';
import ToDo from '../mixins/toDo';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getFormDataFieldsValue } from '@supplier/utils';
import {
  queryYearToDoListService,
  exportYearToDoService
} from '@api/supplier/contract/yearToDo';

const menuId = 360;
export default {
  mixins: [ BasicPage, Dict, ToDo ],
  data () {
    return {
      menuId,
      visible: false,
      FORM_ITEM_LIST,
      formData: getFormDataFieldsValue(FORM_ITEM_LIST),
      exportInfo: {}
    };
  },
  created () {
    this.getTableData();
  },
  methods: {
    // 获取表格数据
    async getTableData () {
      const data = {
        ...this.initSearchParams(),
        ...this.pagination,
      }
      setAuthBtnId()
      const res = await queryYearToDoListService(
        data,
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        const { records, total } = res.result;
        this.tableInfo.list = records;
        this.pagination.total = total;
      }
    },
    // 导出
    async handleExport () {
      this.visible = true;
      this.exportInfo = {
        service: exportYearToDoService,
        excelTitle: '供应商合同签订年度待办',
        params: this.initSearchParams(),
      }
    },
  }
};
</script>
